<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="fanhui" />
        <!-- <img src="../../assets/images/01_11.png" alt="" class="img_zuo" /> -->
        <div>{{title}}监督检查计划</div>
        <div class="btn-add">
          <div @click="ckjh">查看计划</div>
          <!-- <img src="../../assets/images/big.png" alt="" /> -->
        </div>
        <!-- <div class="btn-change" >切换</div> -->
      </div>
    </header>
    <div class="contant">
      <div class="hr"></div>
      <div class="tongji_title">
        <div>监督检查计划完成情况</div>
        <div>当期累计</div>
      </div>
      <div class="tongji_title_nav">
        <div>
          <div style="font-size: 0.2222rem;">当期完成数：</div>
          <div class="bg4"></div>
        </div>
        <div>
          <div style="font-size: 0.2222rem;">当期计划数：</div>
          <div class="bgs">
            <div class="bg3"></div>&nbsp;<div>重点检查</div>&nbsp;
            &nbsp;<div class="bg2"></div>&nbsp;<div>一般检查</div>&nbsp;
            &nbsp;<div class="bg1"></div>&nbsp;<div>随机抽查</div>
          </div>
        </div>
      </div>
      <div class="overhid">
        <div class="zzt_prent">
          <div id="zzt_x" ref="zzt_x"></div>
        </div>
      </div>
      <div class="hr"></div>
      <div class="tongji_title">
        <div>监督检查计划统计表</div>
      </div>
      <div class="overhid">
        <div class="zzt_prent1">
          <div id="zzt_y" ref="zzt_y"></div>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
  import echarts from "echarts"
  export default {
    name: 'tongji_1',
    data() {
      return {
        zzt_x: [[], [0, 0, 0], [0, 0, 0], []],
        zzt_y1: [//随机抽查统计
          [],
          [],
          [],
          []
        ],
        zzt_y2: [//一般检查统计
          [],
          [],
          [],
          []
        ],
        zzt_y3: [//重点检查统计
          [],
          [],
          [],
          []
          // [400, 300, 100, 100],
          // [0, 0, 0, 0],
          // [0, 0, 0, 0],
          // [200, 300, 200, 100]
        ],
        zzt_name: [],//监督检查计划统计表 名称
        zzt_id: [],//监督检查计划统计表 id
        title: "监督检查计划",
        zzt_name_cunt: -1,
        complete: 0,
        max_is:10,

      }
    },
    methods: {
      qiehuan() {
        this.$router.push("/jdjc_table");
      },
      fanhui() {//返回
        // this.$router.push("/index");
        this.$router.back()
      },
      ckjh() {//查看计划
        var info = {
          active: 0,
          jd: "",//id
          sq: "",
        }
        sessionStorage.setItem("jdjc_table_active", JSON.stringify(info))
        sessionStorage.setItem("jdjc_title", this.title)
        sessionStorage.setItem("jdjc_table_fanhui_push", "/tongji_1")
        this.$router.push("/jdjc_table");
        // if (sessionStorage.getItem("index_rank") == 1) {
        // } else {
        //   sessionStorage.setItem("jdjc_wd_fanhui_push", "/tongji_1")
        //   this.$router.push("/jdjc_wd");
        // }





      },
      inof() {
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        var url = this.$global_msg.Url.host + '/SearchScreen/selectSearchScreenByUnitsId?userId=' + this.userId;
        this.axios.get(url).then(res => {
          console.log(res)
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
          if (res.data.code == 0) {
            this.datas = res.data.rows.list
          } else {
            this.$toast('服务器数据异常!');
          }

        }).catch(err=>{
             this.$terminal._error(err)
          })

      },
      zhuzhuangtu_x() {//柱状图
        var _this = this
        // var myChart_zz = echarts.init(document.getElementById("zz_tu"));
        let a = this.$refs.zzt_x
 
        if (a) {
          let myChar = echarts.init(a)
          myChar.on('click', function (params) {
            console.log(params.dataIndex)
            var type = {
              0: 3,
              1: 2,
              2: 1,
            };
            var jdjc_params = {
              from: '/tongji_1',
              type: type[params.dataIndex],
              dwId: _this.dwId
            };
            localStorage.setItem("jdjc_params", JSON.stringify(jdjc_params));
            sessionStorage.setItem("jdjc_title", _this.title)
            _this.$router.push("/jdjc_list");
          })
          var option = {
            grid: {
              top: "5%",
              left: '0%',
              right: '20%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              max:_this.max_is,
              axisTick: {
                show: true,//取消刻度尺
                lineStyle: {
                  color: '#CCCCCC',//坐标轴刻度颜色,
                }
              },

              axisLabel: {
                show: true,
                textStyle: {
                  color: '#535353',//字体颜色,
                  fontSize: 12,
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#CCCCCC',//坐标轴线颜色,
                }
              }
            },
            yAxis: {
              type: 'category',

              axisLabel: {
                show: true,
                // rotate: 30,
                textStyle: {
                  color: '#535353',//字体颜色
                  fontSize: 13,
                },
              },
              axisTick: {
                show: false,//取消刻度尺
              },
              axisLine: {
                show: false,//取消刻度尺
              },

              data: ['随机抽查', '一般检查', '重点检查']
            },
            series: [
              {
                type: 'bar',
                stack: '总量',
                color: "#FFBE23",
                label: {
                  normal: {
                    position: 'right',
                    show: false,
                  },
                },
                data: this.zzt_x[3]
              },

              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                     
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==0) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },

                  }
                },
                barWidth: 20,

                color: "#77E469",
                data: this.zzt_x[0]
              },
              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                     
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==1) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  }
                },
                color: "#23C9FF",

                data: this.zzt_x[1]
              },
              {
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    formatter: function (params) {
                     
                      let Divisor = _this.zzt_x[params.dataIndex][params.dataIndex]
                      let coverDivisor = _this.zzt_x[params.dataIndex][params.dataIndex] + _this.zzt_x[3][params.dataIndex]
                      if (coverDivisor != 0 && params.dataIndex==2) {
                        return "(" + _this.zzt_x[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  }
                },
                color: "#238BFF",
                data: this.zzt_x[2]
              },
            ],


          };
          myChar.setOption(option);
        }
      },
      zhuzhuangtu_y() {//柱状图

        // if(this.zzt_name.length>5){
        //   var width=(this.zzt_name.length-5)*15+100
        //   $("#zzt_y").css({"width":width+"%"})
        // }

        var _this = this
        // var myChart_zz = echarts.init(document.getElementById("zz_tu"));
        let a = this.$refs.zzt_y

        if (a) {
          let myChar = echarts.init(a)
          myChar.on('click', function (params) {
            console.log( _this.zzt_id[params.dataIndex])
            sessionStorage.setItem("tongji_1_id", _this.zzt_id[params.dataIndex])
            sessionStorage.setItem("tongji_1_name", _this.zzt_name[params.dataIndex])
            sessionStorage.setItem("jdjc_title", _this.zzt_name[params.dataIndex])
            _this.$router.push("/tongji_2");
          })
          var option = {
            grid: {
              top: "2%",
              left: '0%',
              right: '20%',
              bottom: '2%',
              containLabel: true
            },

            xAxis: {
              position: 'top',
              type: 'value',
              axisTick: {
                show: false,//取消刻度尺
                // lineStyle: {
                //   color: '#CCCCCC',//坐标轴刻度颜色,
                // }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#535353',//字体颜色,
                  fontSize: 12,
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#CCCCCC',//坐标轴线颜色,
                }
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                show: true,
                // rotate: -25,
                textStyle: {
                  color: '#535353',//字体颜色
                  fontSize: 13,
                },
              },
              axisTick: {
                show: false,//取消刻度尺
              },
              axisLine: {
                show: false,//取消刻度尺
              },
              // data: ['二府衙', '朝千路', '棉花街',]
              data: this.zzt_name
            },
            series: [
              // 重点检查
              {
                type: 'bar',
                stack: '重点检查',
                barWidth: 10,

                barCategoryGap: '20%',
                color: "#FFBE23",
                data: this.zzt_y1[3]
              },
              {
                type: 'bar',
                stack: '重点检查',
                color: "#238BFF",
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    fontSize: 10,
                    // offset: [7, -5],
                    // rotate: 90,
                    formatter: function (params) {
                      // console.log("总：", params)
                      let Divisor = _this.zzt_y1[0][params.dataIndex]
                      let coverDivisor = _this.zzt_y1[0][params.dataIndex] + _this.zzt_y1[3][params.dataIndex]
                      if (coverDivisor != 0) {
                        return "(" + _this.zzt_y1[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  },

                },
                data: this.zzt_y1[0]
              },
              // 一般检查
              {
                type: 'bar',
                stack: '一般检查',
                barWidth: 10,
                color: "#FFBE23",
                data: this.zzt_y2[3]
              },
              {
                type: 'bar',
                stack: '一般检查',
                color: "#23C9FF",
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    fontSize: 10,
                    // offset: [7, -5],
                    // rotate: 90,
                    formatter: function (params) {
                      // console.log("总：", params)
                      let Divisor = _this.zzt_y2[0][params.dataIndex]
                      let coverDivisor = _this.zzt_y2[0][params.dataIndex] + _this.zzt_y2[3][params.dataIndex]
                      if (coverDivisor != 0) {
                        return "(" + _this.zzt_y2[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  },

                },
                data: this.zzt_y2[0]
              },
              // 随机抽查
              {
                type: 'bar',
                stack: '随机抽查',
                barWidth: 10,
                color: "#FFBE23",
                data: this.zzt_y3[3]
              },
              {
                type: 'bar',
                stack: '随机抽查',
                color: "#77E469",
                label: {
                  normal: {
                    position: 'right',
                    show: true,
                    color: "#535353",
                    fontSize: 10,
                    // offset: [7, -5],
                    // rotate: 90,
                    formatter: function (params) {
                      // console.log("总：", params)
                      let Divisor = _this.zzt_y3[0][params.dataIndex]
                      let coverDivisor = _this.zzt_y3[0][params.dataIndex] + _this.zzt_y3[3][params.dataIndex]
                      if (coverDivisor != 0) {
                        return "(" + _this.zzt_y3[3][params.dataIndex] + "/" + coverDivisor + ")"
                      } else {
                        return ""
                      }
                    },
                  },

                },
                data: this.zzt_y3[0]
              },

            ],


          };
          myChar.setOption(option);
        }
      },
      akey() {//重点检查
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/monitoringPlan/planFinishStatus1?userId=${this.userId}`
        ).then(res => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
          console.log(res)
          if (res.data.code == 200) {
            this.zzt_x[2][2] = (res.data.rows.total - res.data.rows.num)
            this.zzt_x[3][2] = res.data.rows.num
            this.complete += 1

            if(res.data.rows.total>10){
              this.max_is=null
            }

          } else {
            this.$toast(res.data.msg);
          }

        })
      },
      commonly() {//一般检查
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/monitoringPlan/planFinishStatus2?userId=${this.userId}`
        ).then(res => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
          console.log(res)
          if (res.data.code == 200) {
            this.zzt_x[1][1] = (res.data.rows.total - res.data.rows.num)
            this.zzt_x[3][1] = res.data.rows.num
            this.complete += 1
            if(res.data.rows.total>10){
              this.max_is=null
            }
          } else {
            this.$toast(res.data.msg);
          }

        })
      },
      spotcheck() {//随机抽查
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/monitoringPlan/planFinishStatus3?userId=${this.userId}`
        ).then(res => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
          console.log(res)
          if (res.data.code == 200) {
            this.zzt_x[0][0] = (res.data.rows.total - res.data.rows.num)
            this.zzt_x[3][0] = res.data.rows.num
            this.complete += 1
            if(res.data.rows.total>10){
              this.max_is=null
            }
          } else {
            this.$toast(res.data.msg);
          }

        })
      },
      akey_tongji() {//统计表
        var _this = this
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        this.axios.get(
          `${this.$global_msg.Url.host}/monitoringPlan/planStatistics1?userId=${this.userId}`
        ).then(res => {
          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
          console.log("统计表", res)
          if (res.data.code == 200) {
            res.data.rows.forEach(function (item, i) {
              // console.log(item)
              // console.log(i)
              if (Object.keys(item.mapZd).length != 0 || Object.keys(item.mapYb).length != 0 || Object.keys(item.mapSj).length != 0) {
                _this.zzt_name_cunt++;
                _this.zzt_y1[0][_this.zzt_name_cunt] = (item.mapZd.total - item.mapZd.num)
                _this.zzt_y1[1][_this.zzt_name_cunt] = 0
                _this.zzt_y1[2][_this.zzt_name_cunt] = 0
                _this.zzt_y1[3][_this.zzt_name_cunt] = item.mapZd.num

                _this.zzt_y2[0][_this.zzt_name_cunt] = (item.mapYb.total - item.mapYb.num)
                _this.zzt_y2[1][_this.zzt_name_cunt] = 0
                _this.zzt_y2[2][_this.zzt_name_cunt] = 0
                _this.zzt_y2[3][_this.zzt_name_cunt] = item.mapYb.num

                _this.zzt_y3[0][_this.zzt_name_cunt] = (item.mapSj.total - item.mapSj.num)
                _this.zzt_y3[1][_this.zzt_name_cunt] = 0
                _this.zzt_y3[2][_this.zzt_name_cunt] = 0
                _this.zzt_y3[3][_this.zzt_name_cunt] = item.mapSj.num
                _this.zzt_name.push(item.mapMc)
                _this.zzt_id.push(item.mapId)
              }
            })
            // _this.zzt_name.push("点位1")
            // _this.zzt_name.push("点位2")
            // if (_this.zzt_name.length > 5) {
            //   var hh = (_this.zzt_name.length - 5) * 20 + 100
            //   $("#zzt_y").css({ "height": hh + "%" })
            // }
            var hh = _this.zzt_name.length * 1.5
            $("#zzt_y").css({ "height": hh + "rem" })
            _this.zhuzhuangtu_y()
            console.log(_this.zzt_name)
            console.log(_this.zzt_y1)
            console.log(_this.zzt_y3)
          } else {
            this.$toast(res.data.msg);
          }

        })
      },

    },
    created() {
      this.userId = localStorage.getItem("userId")//获取访问id
      this.title = sessionStorage.getItem("jdjc_tongji_title")

    },
    mounted() {
      var _this = this;
      var win_h = window.screen.height
      var h1 = $(".overhid").height()
      var h2 = $(".tongji_title").height() * 2 + $(".tongji_title_nav").height()
      var h3 = 130 / 960 * win_h
      console.log(win_h, h1, h2, h3, (win_h - h1 - h2 - h3))
      // $("#zzt_y").height(win_h-h1-h2-h3)
      $(".zzt_prent1").height(win_h - h1 - h2 - h3)
      this.akey_tongji()
      this.akey()
      this.commonly()
      this.spotcheck()

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.fanhui();
      // }, false);
    },
    watch: {
      complete: function (i, ii) {
        if (i == 3) {
          this.zhuzhuangtu_x()
        }
      }
    },
  }
</script>

<style scoped>
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .btn-add {
    position: absolute;
    right: 0.37037rem;
    width: auto !important;
    height: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
  }

  .btn-add {
    font-size: 0.388888rem !important;
  }

  .btn-change {
    position: absolute;
    left: 1.537037rem;
    font-size: 0.388888rem !important;
    bottom: 0;
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* 头部结束 */
  .contant {
    margin-top: 1.8519rem;
  }

  .hr {
    height: 0.1852rem;
    width: 100%;
    background: #F7F7F9;
    border-bottom: 1Px solid #EBEBEB;
  }

  .tongji_title {
    height: 1.0185rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.3704rem;
    flex-wrap: wrap;
  }

  .tongji_title div {
    font-size: 0.3889rem;
  }

  .tongji_title_nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .tongji_title_nav>div {
    width: 100%;
    font-size: 0.3889rem;
    display: flex;
    align-items: center;
    padding: 0 0.3704rem;
  }

  /* 柱状图横向x */
  .zzt_prent {
    height: 4.6296rem;
    width: 100%;

    box-sizing: border-box;
  }

  #zzt_x {
    width: 100%;
    height: 4.6296rem;
    margin-right: 10%;
  }

  .zzt_prent1 {
    overflow-y: auto;
    height: 7.5556rem;
    width: 100%;
    box-sizing: border-box;
  }

  #zzt_y {
    width: 100%;
    height: 100%;
    margin-right: 10%;
  }

  .overhid {
    overflow: hidden;
    padding: 0 0.3704rem;
  }

  .bgs {
    display: flex;
    align-items: center;
  }

  .bgs div {
    font-size: 0.2222rem;
  }

  .bg1 {
    background: #77E469;
    width: 0.3704rem;
    height: 0.1481rem;
  }

  .bg2 {
    background: #23C9FF;
    width: 0.3704rem;
    height: 0.1481rem;
  }

  .bg3 {
    background: #238BFF;
    width: 0.3704rem;
    height: 0.1481rem;
  }

  .bg4 {
    background: #FFBE23;
    width: 0.3704rem;
    height: 0.1481rem;

  }
</style>